<template>
    <view class="page">
        <view class="circle-leader">
            <view class="circle-leader-title">圈主</view>
            <view class="circle-leader-list">
                <view class="leader-list-item" v-for="item in circle_host_list" :key="item.id" @click="addPersonCenter(item.user_id)">
                    <view class="list-item-head">
                        <img :src="item.user_info.photo_url" />
                    </view>
                    <view class="list-item-name">
                        <view class="user-name">{{item.user_info.nickname}}</view>
                        <view class="user-label">
                            <img v-if="item.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'" />
                            <text v-if="item.user_grade_name">{{item.user_grade_name}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="circle-leader">
            <view class="circle-leader-title">小圈主</view>
            <view class="circle-leader-list">
                <view class="list-null" v-if="circle_admin.length==0">
                    <text>暂无小圈主~</text>
                </view>
                <view class="leader-list-item" v-for="(item,index) in circle_admin" :key="index" @click="addPersonCenter(item.user_id)" >
                    <view class="list-item-head">
                        <img :src="item.user_info.photo_url" />
                    </view>
                    <view class="list-item-name">
                        <view class="user-name">{{item.user_info.nickname}}</view>
                        <view class="user-label">
                            <img :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'" />
                            <text>初入江湖</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "circlebarAdmin",
        data(){
            return{
                circle_id:'',
                circle_admin: [],
                circle_host_list: [],
            }
        },
        onLoad(query){
            this.circle_id = query.circle_id
        },
        onShow(){
            this.getCircleAdminList()
        },
        methods:{
            //获取圈子管理员列表
            async getCircleAdminList(){
                let params = {
                    circle_id : this.circle_id,
                    user_token : uni.getStorageSync('userToken')
                }
                const res = await this.$api.getCircleAdminList(params);
                if (res.data.level == 'success'){
                    this.circle_admin = res.data.circle_admin;
                    this.circle_host_list = res.data.circle_host_list;
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //跳转到个人主页
            addPersonCenter(userID){
                uni.navigateTo({
                    url: "/pages/person/customHomepage/customHomepage?userId="+userID
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .page{
        background: #F1F4F7;
        min-height: 100vh;
    }
    .circle-leader{
        background: #FFFFFF;
        padding: 30rpx;
        margin-bottom: 20rpx;
        .circle-leader-title{
            font-size: 32rpx;
            font-weight: bolder;
            line-height: 100rpx;
        }
        .circle-leader-list{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: left;
            align-items: center;
            .leader-list-item{
                width: 50%;
                display: flex;
                flex-direction: row;
                justify-content: left;
                height: 120rpx;
                .list-item-head{
                    width: 100rpx;
                    height: 100rpx;
                    padding: 10rpx 0;
                    img{
                        border-radius: 360rpx;
                    }
                }
                .list-item-name{
                    width: calc(100% - 140rpx);
                    display: flex;
                    flex-direction: column;
                    justify-content: left;
                    padding: 20rpx;
                    .user-name{
                        line-height: 50rpx;
                        font-size: 28rpx;
                        color: #000000;
                    }
                    .user-label{
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        line-height: 30rpx;
                        img{
                            width: 52rpx;
                            height: 30rpx;
                        }
                        text{
                            font-size: 22rpx;
                            line-height: 30rpx;
                            color: #BBBCBF;
                        }
                    }
                }
            }
        }
    }
    .list-null{
        width: 100%;
        padding: 80rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text{
            font-size: 32rpx;
            line-height: 50rpx;
            text-align: center;
            color: #BBBCBF;
        }
    }
</style>